<template>
    <ChartBlock ref="chart" :height="'350px'" />
</template>

<script>
import ChartBlock from '@/components/Charts'
const animationDuration = 1000
export default {
    components: {
        ChartBlock
    },
    props: {
        barData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            chartInstance: null
        }
    },
    watch: {
        barData(val) {
            this.updateChart(val)
        }
    },
    destroyed() {
        window.removeEventListener('resize', this.screenAdapter)
    },
    mounted() {
        this.$nextTick(() => {
            this.chartInstance = this.$refs.chart.getChartInstance()
            // 初始化图表
            this.initChart()
            window.addEventListener('resize', this.screenAdapter)
        })
    },
    methods: {
        // 初始化图表
        initChart() {
            const initOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [],
                    right: 0,
                    top: '40%',
                    orient: 'vertical'
                },
                grid: {
                    top: '8%',
                    left: '3%',
                    right: '12%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    name: '公里'
                },
                series: []
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.showLoading({
                text: '暂无数据',
                showSpinner: false, // 隐藏加载中的转圈动图
                textColor: '#9090a0',
                maskColor: 'rgba(255, 255, 255, 0.8)',
                fontSize: '14px',
                fontWeight: '400',
                fontFamily: 'Helvetica'
            })
        },
        // 获取数据之后更新图表
        updateChart(data) {
            if (data && data.length > 0) {
                this.chartInstance.hideLoading()
                // 处理图表需要的数据
                const legendData = ['结构性修复', '功能性修复', '预防性养护']
                const legendData1 = ['structureMaintMileage', 'functionMaintMileage', 'preventionMaintMileage']
                const xAxisData = []
                const seriesData = []
                data.forEach(item => {
                    xAxisData.push(item.year)
                })
                for (let index = 0; index < legendData.length; index++) {
                    seriesData.push({
                        name: legendData[index],
                        type: 'bar',
                        barWidth: 16,
                        data: data.map(item => item[legendData1[index]])
                    })
                }
                const dataOption = {
                    legend: {
                        data: legendData
                    },
                    xAxis: {
                        data: xAxisData
                    },
                    series: seriesData
                }
                setTimeout(() => {
                    this.chartInstance.setOption(dataOption)
                }, 500)
            } else {
                this.chartInstance.clear()
                this.initChart()
            }
        },
        // 屏幕变化时调整图表
        screenAdapter() {
            this.chartInstance.resize()
        }
    }
}
</script>

<style scoped lang="scss">
</style>
